<template>
  <div>
    <div v-if="!errorFlag">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="IMPALA"
          name="1"
        >
          <el-form
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="时间:">
              <el-radio-group
                v-model="queryForm.time"
                @change="timeChange"
              >
                <el-radio
                  v-for="item in dateList"
                  :key="item"
                  :label="item"
                />
              </el-radio-group>
              <el-date-picker
                v-model="queryForm.value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                @change="showTime"
              />
            </el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="queryModel"
            >查询</el-button>
          </el-form>

          <el-row>
            <el-col
              :span="4"
              style="background-color:#fafafa"
            >
              <el-button
                type="text"
                size="small"
                style="margin-left:50%"
                @click="clearChange"
              >清除所有选择</el-button>
              <el-form
                label-position="top"
                style="padding-left:4px"
              >
                <el-form-item label="集群信息:">
                  <!-- <el-radio-group v-model="setForm.cluster" style="display:flex;flex-flow:column nowrap;align-items:flex-start">
                            <el-radio v-for="item in clusterList" :label="item.value" @click.native.prevent="changeCluster(item.value)">{{item.label}}</el-radio>
                        </el-radio-group> -->
                  <el-select
                    v-model="setForm.cluster"
                    placeholder="请选择集群"
                    clearable
                  >
                    <el-option
                      v-for="val in clusterList"
                      :key="val.value"
                      :label="val.label"
                      :value="val.value"
                    />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="模型名称:">
                  <el-select
                    v-model="setForm.modelNameList"
                    placeholder="请选择模型"
                    multiple
                  >
                    <el-option
                      v-for="val in modelList"
                      :key="val"
                      :label="val"
                      :value="val"
                    />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="持续时间:">
                  <el-radio-group
                    v-model="setForm.queryDuration"
                    style="display:flex;flex-flow:column;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in continueList"
                      :key="item.label"
                      :label="item.value"
                      @click.native.prevent="changeDuration(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="线程:CPU时间:">
                  <el-radio-group
                    v-model="setForm.threadCpuTime"
                    style="display:flex;flex-flow:column nowrap;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in threadList"
                      :key="item.value"
                      :label="item.value"
                      @click.native.prevent="changeCpuTime(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="线程：网络发送等待时间:">
                  <el-radio-group
                    v-model="setForm.threadNetworkSendWaitTime"
                    style="display:flex;flex-flow:column nowrap;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in netWorkList"
                      :key="item.value"
                      :label="item.value"
                      @click.native.prevent="changeNetworkSendWaitTime(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="读取的HDFS字节:">
                  <el-radio-group
                    v-model="setForm.hdfsBytesRead"
                    style="display:flex;flex-flow:column nowrap;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in byteList"
                      :key="item.value"
                      :label="item.value"
                      @click.native.prevent="changeBytesRead(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="客户端获取等待时间:">
                  <el-radio-group
                    v-model="setForm.clientFetchWaitTime"
                    style="display:flex;flex-flow:column nowrap;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in waitList"
                      :key="item.value"
                      :label="item.value"
                      @click.native.prevent="changeFetchWaitTime(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="规划等待时间:">
                  <el-radio-group
                    v-model="setForm.planningWaitTime"
                    style="display:flex;flex-flow:column nowrap;align-items:flex-start"
                  >
                    <el-radio
                      v-for="item in percentageList"
                      :key="item.value"
                      :label="item.value"
                      @click.native.prevent="changePlanningWaitTime(item.value)"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col
              v-loading="queryFlag"
              :span="20"
            >
              <el-pagination
                align="center"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="margin-left:20%;position:relative"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
              <!-- <el-button
                v-if="tableList.length>0"
                size="mini"
                type="primary"
                style="position:absolute;top:0;left:90%"
                @click="loadData"
              >参数导出</el-button> -->
              <div
                v-for="(item,index) in tableList"
                :key="index"
                class="main"
              >
                <el-row>
                  <el-col :span="3">
                    <div
                      class="title"
                      style="font-size:12px"
                    >{{ item.time }}</div>
                    <div class="title">集群：<span style="color:#868687">{{ item.cluster }}</span></div>
                    <div class="title">子集群：<span style="color:#868687">{{ item.childrenCluster }}</span></div>
                  </el-col>
                  <el-col :span="21">
                    <div
                      style="font-size:14px;margin:10px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                      class="sql"
                    >
                      <i
                        class="el-icon-arrow-right right"
                        style="color:blue;font-size:18px"
                        @click="open(index)"
                      />
                      <i
                        class="el-icon-arrow-down down"
                        style="color:blue;font-size:18px;display:none"
                        @click="off(index)"
                      />
                      {{ item.sql }}
                    </div>
                    <el-row>
                      <el-col
                        v-for="val in item.data"
                        :key="val.value"
                        :span="8"
                      >
                        <div class="box">
                          <div class="content1">{{ val.value }}</div>
                          <div class="content2">{{ val.key }}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div style="margin-left:85%">
                  <el-button
                    v-if="item.type!=='N/A'"
                    type="text"
                    size="mini"
                    @click="errorDetail(index)"
                  >详情</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          label="YARN"
          name="2"
        >
          <yarnModel
            v-if="activeName==='2'"
            ref="yarnInfo"
          />
        </el-tab-pane>
        <!-- <el-tab-pane label="RANGER" name="3">
            <ranger  v-if="activeName==='3'" />
          </el-tab-pane> -->
      </el-tabs>
    </div>
    <errorData
      v-if="errorFlag"
      :detail-data="detailData"
      @server="server"
    />
  </div>
</template>
<script>
import audit from '@/api/phaseTwo/audit.js'
import errorData from './indicators.vue'
import yarnModel from './yarnModel.vue'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  components: {errorData, yarnModel},
  data() {
    return {
      changeFlag: false,
      setForm: {
        cluster: '',
        queryDuration: '',
        threadCpuTime: '',
        threadNetworkSendWaitTime: '',
        hdfsBytesRead: '',
        clientFetchWaitTime: '',
        planningWaitTime: '',
        modelNameList: []
      },
      dateList: ['30分钟', '1小时', '2小时', '6小时', '12小时', '1天', '7天'],
      tableList: [

      ],
      activeName: '1',
      activeNames: '1',
      errorFlag: false,
      queryForm: {
        time: '30分钟',
        value: ''
      },
      cmList: [],
      clusterList: [],
      componentList: ['QUERY', 'DDL', 'DML', 'MAPREDUCE', 'SPARK', 'FLINK'],
      startTime: '',
      endTime: '',
      queryData: [],
      detailData: {},
      continueList: [{label: '0-500ms', value: '0-500'}, {label: '500ms-1s', value: '500-1000'}, {label: '1s-5s', value: '1000-5000'}, {label: '5s-30s', value: '5000-30000'}, {label: '30s-1m', value: '30000-60000'}, {label: '1m-1h', value: '60000-3600000'}, {label: '1h-24h', value: '3600000-86400000'}],
      threadList: [{label: '0-10s', value: '0-10000'}, {label: '10s-30s', value: '10000-30000'}, {label: '30s-1m', value: '30000-60000'}, {label: '1m-10m', value: '60000-600000'}, {label: '10m-1h', value: '600000-3600000'}, {label: '1h-24h', value: '3600000-86400000'}],
      netWorkList: [{label: '0-5ms', value: '0-5'}, {label: '5ms-30ms', value: '5-30'}, {label: '30ms-500ms', value: '30-500'}, {label: '500ms-5s', value: '500-5000'}, {label: '5s-30s', value: '5000-30000'}, {label: '30s-30m', value: '30000-1800000'}],
      byteList: [{label: '0-30KB', value: '0-30'}, {label: '30KB-300KB', value: '30-300'}, {label: '300KB-3MB', value: '300-3072'}, {label: '3MB-300MB', value: '3072-307200'}, {label: '300MB-3GB', value: '307200-3145728'}],
      waitList: [{label: '0-100ms', value: '0-100'}, {label: '100ms-300ms', value: '100-300'}, {label: '300ms-500ms', value: '300-500'}, {label: '500ms-1m', value: '500-60000'}, {label: '1m-10m', value: '60000-600000'}],
      percentageList: [{label: '0-10ms', value: '0-10'}, {label: '10ms-30ms', value: '10-30'}, {label: '30ms-500ms', value: '30-500'}, {label: '500ms-1s', value: '500-1000'}, {label: '1s-30s', value: '1000-30000'}],
      peakValueList: [],
      pageIndex: 0, // 当前页码
      pageSize: 10, // 每页的数据条数
      total: null, // 总条数
      modelList: [],
      queryFlag: false,
      pickerOptions: {
        disabledDate(time) {
          const curDate = (new Date()).getTime()
          const three = 30 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          return time.getTime() > Date.now() || time.getTime() < threeMonths
        }
      }
    }
  },
  watch: {

  },
  created() {
    this.getCluster()
    this.queryModel()
    this.getModelName()
  },
  mounted() {
  },
  methods: {
    errorDetail(index) {
      this.detailData = this.queryData[index]
      this.errorFlag = true
    },
    changeClose() {
      this.changeFlag = false
    },
    handleClick(data) {
      this.clearChange()
      // this.$refs.yarnInfo.clearChange()
    },
    handleClicks(data) {

    },
    server(val) {
      this.errorFlag = val
    },
    showTime() {
      this.queryForm.time = ''
      this.startTime = this.queryForm.value[0]
      this.endTime = this.queryForm.value[1]
    },
    timeChange() {
      this.queryForm.value = ''
      if (this.queryForm.time === '30分钟') {
        this.startTime = this.getTime(new Date() - 30 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '1小时') {
        this.startTime = this.getTime(new Date() - 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '2小时') {
        this.startTime = this.getTime(new Date() - 2 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '6小时') {
        this.startTime = this.getTime(new Date() - 6 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '12小时') {
        this.startTime = this.getTime(new Date() - 12 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '1天') {
        this.startTime = this.getTime(new Date() - 24 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '7天') {
        this.startTime = this.getTime(new Date() - 7 * 24 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      }
    },
    getTime(time) {
      var date = new Date(time)
      const Y = date.getFullYear()
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
    },
    open(index) {
      const sql = document.getElementsByClassName('sql')
      const right = document.getElementsByClassName('right')
      const down = document.getElementsByClassName('down')
      sql[index].style.overflow = ''
      sql[index].style.textOverflow = ''
      sql[index].style.whiteSpace = ''
      right[index].style.display = 'none'
      down[index].style.display = ''
    },
    off(index) {
      let sql = sql = document.getElementsByClassName('sql')
      const right = document.getElementsByClassName('right')
      const down = document.getElementsByClassName('down')
      sql[index].style.overflow = 'hidden'
      sql[index].style.textOverflow = 'ellipsis'
      sql[index].style.whiteSpace = 'nowrap'
      right[index].style.display = ''
      down[index].style.display = 'none'
    },
    queryModel(resetPage = true) {
      if (resetPage) {
        this.pageIndex = 0
      }
      this.queryFlag = true
      if (this.queryForm.time !== '') {
        this.timeChange()
      }
      this.tableList = []
      const obj = {component: 'IMPALA', startTime: this.startTime, endTime: this.endTime, cmFlag: '', clusterFlag: '', queryDurationMin: null, queryDurationMax: null, threadCpuTimeMin: null, threadCpuTimeMax: null, threadNetworkSendWaitTimeMin: null, threadNetworkSendWaitTimeMax: null, hdfsBytesReadMin: null, hdfsBytesReadMax: null, clientFetchWaitTimeMin: null, clientFetchWaitTimeMax: null, planningWaitTimeMin: null, planningWaitTimeMax: null, modelNameList: this.setForm.modelNameList}
      // 判断是否为空
      if (this.setForm.cluster !== '') {
        obj.cmFlag = this.setForm.cluster.split(',')[1]
        obj.clusterFlag = this.setForm.cluster.split(',')[0]
      }
      if (this.setForm.queryDuration !== '') {
        obj.queryDurationMin = this.setForm.queryDuration.split('-')[0] * 1
        obj.queryDurationMax = this.setForm.queryDuration.split('-')[1] * 1
      }
      if (this.setForm.threadCpuTime !== '') {
        obj.threadCpuTimeMin = this.setForm.threadCpuTime.split('-')[0] * 1
        obj.threadCpuTimeMax = this.setForm.threadCpuTime.split('-')[1] * 1
      }
      if (this.setForm.threadNetworkSendWaitTime !== '') {
        obj.threadNetworkSendWaitTimeMin = this.setForm.threadNetworkSendWaitTime.split('-')[0] * 1
        obj.threadNetworkSendWaitTimeMax = this.setForm.threadNetworkSendWaitTime.split('-')[1] * 1
      }
      if (this.setForm.hdfsBytesRead !== '') {
        obj.hdfsBytesReadMin = this.setForm.hdfsBytesRead.split('-')[0] * 1
        obj.hdfsBytesReadMax = this.setForm.hdfsBytesRead.split('-')[1] * 1
      }
      if (this.setForm.clientFetchWaitTime !== '') {
        obj.clientFetchWaitTimeMin = this.setForm.clientFetchWaitTime.split('-')[0] * 1
        obj.clientFetchWaitTimeMax = this.setForm.clientFetchWaitTime.split('-')[1] * 1
      }
      if (this.setForm.planningWaitTime !== '') {
        obj.planningWaitTimeMin = this.setForm.planningWaitTime.split('-')[0] * 1
        obj.planningWaitTimeMax = this.setForm.planningWaitTime.split('-')[1] * 1
      }
      obj.pageIndex = this.pageIndex
      obj.pageSize = this.pageSize
      // 请求
      audit.anomalyModel(obj).then((res) => {
        this.queryData = res.content
        this.total = res.totalElements
        res.content.forEach((item) => {
          if (item.queryType === 'QUERY') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.statement, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: '数据库', key: item.database}, {value: '查询类型', key: item.queryType}, {value: 'Coordinator', key: item.coordinatorHostId}, {value: '持续时间', key: item.queryDuration + 'ms'}, {value: '生成的行', key: item.rowsProduced}, {value: '内存不足', key: detail.oom}, {value: '缺少统计数据', key: detail.stats_missing}, {value: '累积内存使用峰值', key: detail.memory_aggregate_peak}, {value: '线程：CPU 时间', key: detail.thread_cpu_time}, {value: '规划等待时间百分比', key: detail.planning_wait_time_percentage}, {value: '读取的 HDFS 字节', key: detail.hdfs_bytes_read}, {value: '客户端获取等待时间', key: detail.client_fetch_wait_time + 'ms'}], type: item.queryType}
            this.tableList.push(obj)
          } else if (item.queryType === 'DDL') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.statement, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: '数据库', key: item.database}, {value: '查询类型', key: item.queryType}, {value: 'Coordinator', key: item.coordinatorHostId}, {value: '持续时间', key: item.queryDuration + 'ms'}, {value: '内存不足', key: detail.oom}, {value: '缺少统计数据', key: detail.stats_missing}, {value: '规划等待时间', key: detail.planning_wait_time}, {value: '规划等待时间百分比', key: detail.planning_wait_time_percentage}, {value: '客户端获取等待时间', key: detail.client_fetch_wait_time + 'ms'}], type: item.queryType}
            this.tableList.push(obj)
          } else if (item.queryType === 'DML') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.statement, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: '数据库', key: item.database}, {value: '查询类型', key: item.queryType}, {value: 'Coordinator', key: item.coordinatorHostId}, {value: '持续时间', key: item.queryDuration + 'ms'}, {value: '内存不足', key: detail.oom}, {value: '缺少统计数据', key: detail.stats_missing}, {value: '规划等待时间', key: detail.planning_wait_time}, {value: '生成的行', key: item.rowsProduced}, {value: '线程：CPU 时间', key: detail.thread_cpu_time}, {value: '客户端获取等待时间', key: detail.client_fetch_wait_time + 'ms'}], type: item.queryType}
            this.tableList.push(obj)
          } else if (item.queryType === 'N/A') {
            // const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.statement, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: '数据库', key: item.database}, {value: '查询类型', key: item.queryType}, {value: 'Coordinator', key: item.coordinatorHostId}, {value: '持续时间', key: item.queryDuration + 'ms'}], type: item.queryType}
            this.tableList.push(obj)
          }
        })
      }).finally(() => {
        this.queryFlag = false
      })
    },
    getCluster() {
      this.clusterList = []
      audit.getCluster().then((res) => {
        res.forEach((item) => {
          const obj = {label: item.concatName, value: item.clusterFlag + ',' + item.cmFlag}
          this.clusterList.push(obj)
        })
      })
    },
    clearChange() {
      this.setForm = {
        cluster: '',
        queryDuration: '',
        threadCpuTime: '',
        threadNetworkSendWaitTime: '',
        hdfsBytesRead: '',
        clientFetchWaitTime: '',
        planningWaitTime: '',
        modelNameList: []
      }
    },
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.queryModel(false)
    },
    getModelName() {
      const formData = new FormData()
      formData.append('component', 'IMPALA')
      audit.getModelName(formData).then((res) => {
        this.modelList = res
      })
    },
    changeCluster(val) {
      val === this.setForm.cluster ? this.setForm.cluster = '' : this.setForm.cluster = val
    },
    changeDuration(val) {
      val === this.setForm.queryDuration ? this.setForm.queryDuration = '' : this.setForm.queryDuration = val
    },
    changeCpuTime(val) {
      val === this.setForm.threadCpuTime ? this.setForm.threadCpuTime = '' : this.setForm.threadCpuTime = val
    },
    changeNetworkSendWaitTime(val) {
      val === this.setForm.threadNetworkSendWaitTime ? this.setForm.threadNetworkSendWaitTime = '' : this.setForm.threadNetworkSendWaitTime = val
    },
    changeBytesRead(val) {
      val === this.setForm.hdfsBytesRead ? this.setForm.hdfsBytesRead = '' : this.setForm.hdfsBytesRead = val
    },
    changeFetchWaitTime(val) {
      val === this.setForm.clientFetchWaitTime ? this.setForm.clientFetchWaitTime = '' : this.setForm.clientFetchWaitTime = val
    },
    changePlanningWaitTime(val) {
      val === this.setForm.planningWaitTime ? this.setForm.planningWaitTime = '' : this.setForm.planningWaitTime = val
    },
    loadData() {
      const obj = {component: 'IMPALA', startTime: this.startTime, endTime: this.endTime, cmFlag: '', clusterFlag: '', queryDurationMin: null, queryDurationMax: null, threadCpuTimeMin: null, threadCpuTimeMax: null, threadNetworkSendWaitTimeMin: null, threadNetworkSendWaitTimeMax: null, hdfsBytesReadMin: null, hdfsBytesReadMax: null, clientFetchWaitTimeMin: null, clientFetchWaitTimeMax: null, planningWaitTimeMin: null, planningWaitTimeMax: null, modelNameList: this.setForm.modelNameList}
      // 判断是否为空
      if (this.setForm.cluster !== '') {
        obj.cmFlag = this.setForm.cluster.split(',')[1]
        obj.clusterFlag = this.setForm.cluster.split(',')[0]
      }
      if (this.setForm.queryDuration !== '') {
        obj.queryDurationMin = this.setForm.queryDuration.split('-')[0] * 1
        obj.queryDurationMax = this.setForm.queryDuration.split('-')[1] * 1
      }
      if (this.setForm.threadCpuTime !== '') {
        obj.threadCpuTimeMin = this.setForm.threadCpuTime.split('-')[0] * 1
        obj.threadCpuTimeMax = this.setForm.threadCpuTime.split('-')[1] * 1
      }
      if (this.setForm.threadNetworkSendWaitTime !== '') {
        obj.threadNetworkSendWaitTimeMin = this.setForm.threadNetworkSendWaitTime.split('-')[0] * 1
        obj.threadNetworkSendWaitTimeMax = this.setForm.threadNetworkSendWaitTime.split('-')[1] * 1
      }
      if (this.setForm.hdfsBytesRead !== '') {
        obj.hdfsBytesReadMin = this.setForm.hdfsBytesRead.split('-')[0] * 1
        obj.hdfsBytesReadMax = this.setForm.hdfsBytesRead.split('-')[1] * 1
      }
      if (this.setForm.clientFetchWaitTime !== '') {
        obj.clientFetchWaitTimeMin = this.setForm.clientFetchWaitTime.split('-')[0] * 1
        obj.clientFetchWaitTimeMax = this.setForm.clientFetchWaitTime.split('-')[1] * 1
      }
      if (this.setForm.planningWaitTime !== '') {
        obj.planningWaitTimeMin = this.setForm.planningWaitTime.split('-')[0] * 1
        obj.planningWaitTimeMax = this.setForm.planningWaitTime.split('-')[1] * 1
      }
      audit.downLoad(obj).then((res) => {
        // 转换为工作簿
        const ws = XLSX.utils.aoa_to_sheet(res)
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

        // 保存为Excel文件并下载
        const filename = 'impala查询语句.xlsx'
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
        const blob = new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' })
        FileSaver.saveAs(blob, filename)
      })
    },
    s2ab(s) {
      const buf = new ArrayBuffer(s.length)
      const view = new Uint8Array(buf)
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff
      }
      return buf
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}
.content1 {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fafafa;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 12px;
}
.content2 {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 12px;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main{
  padding: 8px;
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  border:1px solid #dedede;
}
.title{
  font-size: 14px;
  text-align: left;
  margin-top:10px;
  color: #000;
}
::v-deep .el-radio{
    margin-right: 15px;
}
::v-deep .el-radio__label {
  width: 100% !important;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 20px;
}
</style>
